<!DOCTYPE HTML>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>标题</title>
		<meta name="Keywords" content="关键字" />
		<meta name="Description" content="页面的简介" />
		<!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
		<!--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">-->

		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/new_file.css" />
		<!--自用css文件-->
		<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				let str = [];
				let i = 0;
				new Vue({
					el: '#my',
					data: {
						isHidden: true,
						check: '',
						quxiao:true,
						title: [
							{
								isif: false,
								zhuti: '疯狂的外星人',
								time: '2019-03-17 17：24 ：17',
								px: 'HD1080P国语中字',
								stc: 'img/lunbo1.jpg',

							},
							{
								isif: false,
								zhuti: '疯狂的外星人2',
								time: '2019-03-17 17：24 ：17',
								px: 'HD1080P国语中字',
								stc: 'img/lunbo1.jpg',

							},
							{
								isif: false,
								zhuti: '疯狂的外星人3',
								time: '2019-03-17 17：24 ：17',
								px: 'HD1080P国语中字',
								stc: 'img/lunbo2.jpg',

							},
							{
								isif: false,
								zhuti: '疯狂的外星人4',
								time: '2019-03-17 17：24 ：17',
								px: 'HD4k国语中字',
								stc: 'img/sharpen,100.jpg',

							}
						]

					},
					methods: {
						edit() {
							if(this.isHidden) {
								this.isHidden = false;
							} else {
								this.isHidden = true;
							}

						},
						all(index) {
							str= index;
//							str += index
							
							this.check = this.title.filter(function(cur) {
								return cur.isif == true;
							})
							
							console.log(this.check);
							if(this.title.length == this.check.length){
								console.log('666');
								this.quxiao=false;
							}else{
								this.quxiao=true;
							}
						},
						quanxze() {      //全选
							
							this.title.filter(function(cur) {
								cur.isif = true;

							})
							this.all();

						},
						del(){    //删除
							console.log(str);
							//代表第几个
//							if(this.title.isif){
//								
//							}
//							for(var i=0;i<this.check.length;i++){
//								console.log('777');
//								if(this.check != ''){
//									console.log(str);
//								
//							}
//							}
						if(this.check != ''){     //判断是否为空，如果不为空就执行删除
							this.title.splice(str, 1);
							this.all();
						}
						},
						quxia(){    //取消全选
							this.title.filter(function(cur){
								
								cur.isif=false;
							
							})
							this.all();
							this.quxiao=true;
						
						}

					}

				})
			}
		</script>
	</head>

	<body>
		<div class="container" id="my">
			<div class="row">
				<div class="col-xs-4"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
				<div class="col-xs-4 text-center">视频</div>
				<div class="col-xs-4 text-right"><span href="" id="edit" @click="edit()" :class="{'hidden-xs':!isHidden}">编辑</span>
					<a href="javascrpit:;" :class="{'hidden-xs':isHidden}" @click="edit()">取消</a>
				</div>
			</div>
			<div class="row History">
				<!--观看记录-->
				<div class="row btn-s" :class="{'hidden-xs':isHidden}">
					<div class="col-xs-6 text-center" :class="{'hidden-xs':!quxiao}"><button @click="quanxze()">全选</button></div>
					<div class="col-xs-6 text-center" :class="{'hidden':quxiao}"><button @click="quxia()">取消全选</button></div>
					<div class="col-xs-6 text-center"><button @click="del()">删除({{check.length}})</button></div>
				</div>
				<div class="" v-for="(titles,index) in title" :key='index'>
					<div class="col-xs-1" :class="{'hidden-xs':isHidden}"><input type="checkbox" name="" id="" value="" v-model="titles.isif" style="margin-top: 30px;" @click="all(index)" /></div>
					<div class="col-xs-5"><img :src="titles.stc" /></div>
					<div class="col-xs-7" :class="{'col-xs-6':!isHidden}">
						<a href="">{{titles.zhuti}}</a>
						<a href="">{{titles.time}}</a>
						<a href="">
							<span>
							
						<i class="fa fa-desktop" aria-hidden="true"></span></i>{{titles.px}}</a>
					</div>
				</div>
			</div>
		</div>
		<!--<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>-->
		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>

	</body>

</html>